<template>
  <md-popup v-model="show" position="left">
    <div class="page-home-my">
      <div class="content">
        <div class="avatar">
          <img src="@/assets/home/my/avatar.png">
        </div>
        <div class="wallet wrap">
          {{ userData.uuid ?? '--' }}
        </div>
        <div class="parent wrap">
          {{ $t('parent.wallet') }}：{{ userData.parent ? userData.parent.uuid : '--' }}
        </div>
        <div class="menu" @click="router.push('/box/token')">
          <img src="@/assets/home/my/key.png">
          {{ $t('home.my_key') }}
          <div class="num">{{ userData.key_num.unused }}</div>
        </div>
        <div class="menu" @click="router.push('/hash')">
          <img src="@/assets/home/my/hash.png">
          {{ $t('home.my_hash') }}
          <div class="num">{{ userData.hash_rate }}</div>
        </div>
        <div class="menu" @click="router.push('/vote')">
          <img src="@/assets/home/my/vote.png">
          {{ $t('home.my_vote') }}
          <div class="num">{{ userData.vote_num.unused }}</div>
        </div>
        <div class="menu" @click="router.push('/nft')">
          <img src="@/assets/home/my/nft.png">
          {{ $t('home.my_nft') }}
          <div class="num">{{ userData.nft_info.nft_total }}</div>
        </div>
      </div>
    </div>
  </md-popup>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { userData } from '@/model/user'

const router = useRouter()
const show = ref(false)

// 打开方法
const open = () => {
  show.value = true
}

// 导出
defineExpose({ open });
</script>

<style lang="scss" scoped>
  .page-home-my{
    width: 250px;
    height: 100%;
    background-color: #0f0041;
    border-right: 10px solid rgb(62, 50, 88);

    .content{
      padding: 30px;
    }

    .avatar{
      width: 70px;
      height: 70px;
      border-radius: 5px;
      overflow: hidden;

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .wallet{
      margin-top: 20px;
      color: #fff;
    }
    
    .parent{
      font-size: 12px;
      margin: 10px 0 20px;
      color: rgba(255,255,255, .7);
      line-height: 20px;
    }

    .menu{
      height: 30px;
      line-height: 30px;
      margin-top: 30px; 
      overflow: hidden;
      color: rgba(255, 255, 255, .7);
      font-size: 14px; 

      img{
        height: 30px;
        float: left; 
        margin-right: 15px;
      }

      .num{
        font-size: 16px;
        float: right;
        color: #fff;
      }
    }
  }
</style>